<template>
  <div class="login_div">
    <div class="login">
      <div class="login_center">
        <div class="login_input">
          <span style="color: #fff;">账号：</span>
          <input type="num" v-model="param.account" placeholder="请输入账号" />
        </div>
        <div class="login_input">
          <span style="color: #fff;">密码：</span>
          <input type="password" v-model="param.password" placeholder="请输入密码" />
        </div>
        <div class="item">
          <input type="checkbox" v-model="remember" />
          <label>记住账号</label>
        </div>
        <div class="login_button" @click="loginbtn && login()"><button>立即登录</button></div>
        <div class="zhuc" @click="loginbtn && registon()">立即开户</div> 
      </div>
    </div>
    <div class="looding" v-if="!loginbtn">选择最优线路中请稍后……</div>
    <div class="looding2" v-if="!loginbtn2">站点已关闭</div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: mapState({
    loginbrn: state => state.loginbrn /* 推送数据 */
  }),
  watch: {
    loginbrn(val) {
      if (val == false) {
        this.loginbtn2 = false;
        // this.$message.error('站点已关闭！');
      } else {
        this.loginbtn2 = true;
      }
    }
  },
  created() {
    /* localStorage 方法 */
    this.getlocalStorage();
    /* cookie 方法 */
    // 在页面加载时从cookie获取登录信息
    // let account = this.getCookie('account');
    // let password = Base64.decode(this.getCookie('password'));
    // 如果存在赋值给表单，并且将记住密码勾选
    // if (account) {
    //   this.remember = true;
    //   this.param.account = account;
    // }
  },
  data() {
    return {
      loginbtn: true,
      loginbtn2: true,
      param: {
        account: '',
        password: '',
        group: 'pc'
      },
      remember: true
    };
  },
  mounted() {},
  methods: {
    //登录
    login() {
      this.loginbtn = false;
      if (this.param.password == '') {
        this.loginbtn = true;
        return this.$notify.error('请输入密码！');
      }
      if (this.param.account == '') {
        this.loginbtn = true;
        return this.$notify.error('请输入账号！');
      }
      this.$post('user/login', this.param).then(res => {
        // console.log(res);
        this.loginbtn = true;
        if (res.code == 1) {
          localStorage.removeItem('_token');
          this.$svcInvoke.setConf('_token', res.data.userinfo.token);
          localStorage.setItem('_token',res.data.userinfo.token);
          localStorage.setItem('userid',res.data.userinfo.id);
          this.$store.commit('set', { userInfo: res.data.userinfo });
          this.param.password = '';
          this.$notify.success('登录成功！');
          this.$router.push({ path: 'home' });
          /* localStorage 方法 */
          if (this.remember == true) {
            this.setlocalStorage(this.param.account);
          } else {
            // this.clearlocalStorage()
          }
          /* cookie 方法 */
          // this.setUserInfo();
        } else {
          this.$notify.error(res.message || '登录失败！');
        }
      });
    },
    registon() {
      this.$router.push({
        path: 'registers'
      });
    },
    /* localStorage 方法 */
    //像localStorage里存入从页面获取的用户名和密码；
    setlocalStorage(c_name) {
      localStorage.siteName = c_name;
      // localStorage.sitePassword = c_pwd
    },
    getlocalStorage: function() {
      // this.param.account = localStorage.getItem('siteName') //保存到保存数据的地方
      let account = localStorage.getItem('siteName');
      if (account) {
        this.remember = true;
        this.param.account = account;
      }
    }
    // 储存表单信息
    // setUserInfo: function() {
    //   // 判断用户是否勾选记住密码，如果勾选，向cookie中储存登录信息，
    //   // 如果没有勾选，储存的信息为空
    //   if (this.remember) {
    //     this.setCookie('account', this.param.account);
    //     // base64加密密码
    //     // let passWord = Base64.encode(this.param.password);
    //     this.setCookie('remember', this.remember);
    //   } else {
    //     this.setCookie('account', '');
    //     // this.setCookie('password', '');
    //   }
    // },
    // 获取cookie
    // getCookie: function(key) {
    //   if (document.cookie.length > 0) {
    //     var start = document.cookie.indexOf(key + '=');
    //     if (start !== -1) {
    //       start = start + key.length + 1;
    //       var end = document.cookie.indexOf(';', start);
    //       if (end === -1) end = document.cookie.length;
    //       return unescape(document.cookie.substring(start, end));
    //     }
    //   }
    //   return '';
    // },
    // 保存cookie
    // setCookie: function(cName, value, expiredays) {
    //   var exdate = new Date();
    //   exdate.setDate(exdate.getDate() + expiredays);
    //   document.cookie = cName + '=' + decodeURIComponent(value) + (expiredays == null ? '' : ';expires=' + exdate.toGMTString());
    // }
  }
};
</script>

<style scoped>
.login_div {
  width: 100%;
  height: 100%;
}
.looding {
  position: fixed;
  top: 300px;
  left: 50%;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  padding: 10px;
}
.looding2 {
  position: fixed;
  top: 0rem;
  left: 0rem;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 30px;
  width: 100%;
  height: 100vh;
  line-height: 100vh;
  text-align: center;
}
.login {
  width: 100%;
  height: 100%;
  background: #666;
  background-image: url(../assets/logo_bg.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-radius: 5px;
  box-shadow: 12px 12px 12px #535353;
}

.login_info {
  position: fixed;
  top: 25%;
  left: 120px;
  color: #fff;
  font-size: 30px;
  font-weight: 600;
}

.login_center {
  width: 480px;
  height: 350px;
  background: rgba(0, 0, 0, 0.5);
  /* opacity: 0.9; */
  position: fixed;
  top: 25%;
  right: 120px;
  border-radius: 5px;
  color: #fff;
}

.login_center > p {
  font-size: 16px;
  padding-top: 15px;
  text-align: center;
}

.login_input {
  width: 100%;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px 0;
}

.login_input > span {
  font-size: 1.2rem;
  color: #333;
}

.login_input > input {
  width: 50%;
  height: 2rem;
  padding: 0 8px;
  box-sizing: border-box;
}
.item {
  width: 100%;
  height: 34px;
  box-sizing: border-box;
  padding-left: 100px;
}
.login_button {
  width: 100%;
  height: 48px;
  /* background: red; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.login_button > button {
  width: 9rem;
  height: 48px;
  letter-spacing: 1px;
  line-height: 32px;
  background: #6e9bcc;
  border-radius: 3px;
  background-image: linear-gradient(to bottom, #ff003b, #f1514aed, #dc1111);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
}

.zhuc {
  cursor: pointer;
  margin-top: 10px;
  font-size: 14px;
  color: #ffffff;
  display: flex;
  justify-content: flex-end;
  padding-right: 48px;
  box-sizing: border-box;
  font-weight: 600;
}
</style>
